<template>
    <div class="user-box">
		<el-row >
			<el-col :span="10" class="box-flex">
				<span class="w-span">旧密码</span><el-input placeholder="请输入内容" v-model="oldPassword" maxLength="20"></el-input>
			</el-col>
			
			
		</el-row>
		<el-row >
			
			<el-col :span="10" class="box-flex" >
				<span class="w-span">新密码</span><el-input placeholder="请输入内容" v-model="newPassword" maxLength="20"></el-input>
			</el-col>
			
		</el-row>
		<el-row >
			<el-col :span="10" class="box-flex">
				<span class="w-span">重复密码</span><el-input placeholder="请输入内容" v-model="surePassword" maxLength="20"></el-input>
			</el-col>
		</el-row>
		<el-row>
			<el-button @click="editPassFn">保存重置</el-button>
		</el-row>
	</div>
</template>

<script>
    import currentPage from '@/components/current-page/current-page.vue'
    import {
        SUCCESS_REQUEST_STATUS
    } from '@/utils/config.js'
	import {
			getToken
	} from '@/utils/auth'
	export default {
		data() {
			return {
				oldPassword: '',
				newPassword: '',
				surePassword: '',
			}
		},
		methods: {
			editPassFn() {
				let attr = !this.oldPassword ? '旧密码不能为空' : !this.newPassword ? '新密码不能为空' : !this.surePassword ? '重复密码不能为空': this.surePassword != this.newPassword ? '两次输入的密码不一致' : '' 
				
				if(attr) {
					this.$message({
						message: attr,
						type: 'error'
					})
					return 
				}
				this.$ajax({
					api: 'admin/changepw',
					params: {
						token: getToken(),
						originPw: this.oldPassword,
						newPw: this.newPassword,
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') : '', 
					}
				}).then(res => {
					if(res.status === SUCCESS_REQUEST_STATUS) {
						this.$message({
							message: '修改成功',
							type: 'success'
						})
					}else{
						this.$message({
							message: res.data.message,
							type: 'error'
						})
					}
				}).catch(err => {
					this.$message({
						message: err.message,
						type: 'error'
					})
				})
			}	
		}
	}
    
</script>

<style>
    .user-box {
        width: 100%;
		padding: 10px;
        max-width: 100%;
    }
	.box-flex{
		display: flex;
		margin-bottom: 20px;
		
	}
	.w-span{
		min-width: 100px;
		line-height: 40px;
		display: inline-block;
	}
</style>
